<!-- 事件日志 -->
<template>
  <div>
    <div class="box">
      <div class="top" style="text-align: right; margin-bottom: 10px;">
        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      </div>
      <el-row>
        <el-col>
          <el-tabs type="border-card" v-model="tabTitle2" @tab-click="tabClick2">
            <el-tab-pane key="概要分析" label="概要分析" name="概要分析" lazy>
              <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px">
                <el-table-column label="序号" width="60" type="index"
                  :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
                  <el-table-column label="进程名称" show-overflow-tooltip prop="ProcName" width="220"></el-table-column>
                  <el-table-column label="进程解释" show-overflow-tooltip prop="Desc" min-width="200"></el-table-column>
                  <el-table-column label="进程分类" show-overflow-tooltip prop="Class" min-width="200"></el-table-column>
                  <el-table-column label="安全等级" show-overflow-tooltip prop="Level" min-width="200"></el-table-column>
                  <el-table-column label="开始时间" show-overflow-tooltip prop="StartTime" width="180">
                    <template slot-scope="{row}">
                      <span>{{ parseTime(row.StartTime) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="结束时间" show-overflow-tooltip prop="EndTime" width="180">
                    <template slot-scope="{row}">
                      <span>{{ parseTime(row.EndTime) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="加载次数" show-overflow-tooltip prop="LoadCnt" width="100"></el-table-column>
                  <el-table-column label="操作" width="120px" fixed="right">
                    <template slot-scope="scope">
                      <el-button size="mini" type="success" @click="detailsChange(scope.row)">加载详情</el-button>
                    </template>
                  </el-table-column>
              </el-table>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=pageNum
                :page-size=pageSize background layout="total, prev, pager, sizes, next, jumper" :total="total">
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane key="加载明细" label="加载明细" name="加载明细" lazy>
              <el-table stripe border :data="tableData2" style="width: 100%; margin-top: 15px">
                <el-table-column label="序号" width="60" type="index"
                  :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
                  <el-table-column label="加载时间" show-overflow-tooltip prop="TransTime" width="180">
                    <template slot-scope="{row}">
                      <span>{{ parseTime(row.TransTime) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="部门" show-overflow-tooltip prop="Department" width="120px"></el-table-column>
                  <el-table-column label="资产名称" show-overflow-tooltip prop="DeviceName" width="160px"></el-table-column>
                  <el-table-column label="使用者" show-overflow-tooltip prop="UserName" width="120px"></el-table-column>
                  <el-table-column label="用户" show-overflow-tooltip prop="ProcUser" width="200"></el-table-column>
                  <el-table-column label="设备IP" show-overflow-tooltip prop="DeviceIP"></el-table-column>
                  <el-table-column label="MAC地址" show-overflow-tooltip prop="Mac" width="120"></el-table-column>
                  <el-table-column label="进程名称" show-overflow-tooltip prop="ProcName"></el-table-column>
                  <el-table-column label="命令行" show-overflow-tooltip prop="CommandLine"></el-table-column>
                  <el-table-column label="父进程用户" show-overflow-tooltip prop="ParentUsername"
                    width="120"></el-table-column>
                  <el-table-column label="父进程路径" show-overflow-tooltip prop="ParentPath" width="120"></el-table-column>
                  <el-table-column label="父进程命令行" show-overflow-tooltip prop="ParentCmdLine"
                    width="120"></el-table-column>
              </el-table>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=pageNum
                :page-size=pageSize background layout="total, prev, pager, sizes, next, jumper" :total="total">
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { parseTime } from "@/utils/index.js";
import { connrequest } from "@/api/firstPage.js"
export default {
  data() {
    return {
      activeName: "",
      tabTitle2: "概要分析",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tab: false,
      tableData: [],
      tableData2: [],
      searchobj: {},
      resourceForm: {},
      DeviceObj: {},
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.Moder = JSON.parse(sessionStorage.getItem('detailStatus'))
    this.pageSize = (Cookies.get('Zhuoguan_DefaultPageLength') || 10) * 1;

    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() { },
  methods: {
    parseTime,
    async detailsChange(row) {
      this.pageNum = 1
      this.pageSize = 10
      this.tabTitle2 = '加载明细'
      this.searchobj = { ProcName: row.ProcName, StartTime: parseTime(row.StartTime), EndTime: parseTime(row.EndTime) }
      this.GetProcessLoadDetail(this.searchobj)
    },
    // 获取所有数据
    getData(searchobj = {}) {
      switch (this.tabTitle2) {
        case '概要分析':
          this.GetEventLog(searchobj)
          break;
        case '加载明细':
          this.GetProcessLoadDetail(searchobj)
          break;
      }
    },
    tabClick2(row) {
      this.pageNum = 1
      this.pageSize = 10
      this.tabTitle = row.label
      this.searchobj = {}
      switch (row.label) {
        case '概要分析':
          this.GetEventLog({ ...this.searchobj })
          break;
        case '加载明细':
          this.GetProcessLoadDetail({ ...this.searchobj })
          break;
      }
    },
    // 获取事件日志列表
    async GetEventLog(searchobj = {}) {
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          DeviceUUID: this.Moder.DeviceUUID,
          ...searchobj
        }
      }
      const res = await connrequest('GetProcessLoad', data)
      res.Data = res.Data || []
      this.tableData = res.Data
      this.total = res.Paging.TotalCount || 0
    },
    async GetProcessLoadDetail(searchobj = {}) {
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          DeviceUUID: this.Moder.DeviceUUID,
          ...searchobj
        }
      }
      const res = await connrequest('GetProcessLoadDetail', data)
      this.tableData2 = res.Data
      this.total = res.Paging.TotalCount || 0
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      switch (this.tabTitle2) {
        case '概要分析':
          this.GetEventLog()
          break;
        case '加载明细':
          this.GetProcessLoadDetail(this.searchobj)
          break;
      }
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      switch (this.tabTitle2) {
        case '概要分析':
          this.GetEventLog()
          break;
        case '加载明细':
          this.GetProcessLoadDetail(this.searchobj)
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./components/css/conncss.scss";
</style>